<template>
    <div>
        <el-row>
            
            <el-col :span="4"><el-input v-model="input" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="4"><el-button type="primary" plain>查询</el-button></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row> 
        <el-table :data="tableData"  stripe border style="width: 97%">
            <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
            <el-table-column prop="idcard" label="年龄" width="180" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="100px" align="center"></el-table-column>
            <el-table-column prop="address" label="住址" ></el-table-column>
            <el-table-column label="治愈日期" align="center" width="120px">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="source" label="感染来源" ></el-table-column> -->
            <el-table-column label="操作" align="center" width="280px">
                <template slot-scope="scope">
                <el-button size="mini" @click="show()">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>

        <el-dialog title="详细信息" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="80px">
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="姓名" >
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-input v-model="form.gender"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="身份证号" prop="">
                        <el-input v-model="form.idcard"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input v-model="form.age"></el-input>
                    </el-form-item> 
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="电话号码" prop="">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="住院时间">
                        <el-input v-model="form.in_hospital_date"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="治疗医院">
                        <el-input v-model="form.hospital"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="感染来源">
                        <el-input v-model="form.source"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="住址">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出院时间" prop="">
                        <el-input v-model="form.out_hospital_date"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.desc" rows="4" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                    </el-form-item>  
                </el-col>
            </el-row>
            
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关闭</el-button>
        </div>
        </el-dialog>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
        input: '',
        tableData: null,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,

        // dialogTableVisible: false,
        dialogFormVisible: false,
        form: {          
          date: '',
          desc: ''
        },
        formLabelWidth: '120px'
    }
  },
  created(){
      this.fetchData()
  },
  methods: {
      fetchData() {
          request({
              url:'../patient_list.json',
              method:'get'
          }).then((response)=>{
              this.tableData=response.data
          })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        show(){
            request({
              url:'../cure_info.json',
              method:'get'
            }).then((response)=>{
                this.form=response.data
            })
            this.dialogFormVisible=true
        }
    }
}
</script>